<template>
    <div class='rankinfobody' @scroll='scroll'>
        <img :src='ranklistimg' alt='' class='rankimg'>
        <div :class="[titleshow==true?'fixedtitle':'list-title']">{{ranklisttitle}}</div>
        <!--用于滚动超出图片高度后 标题固定顶部 撑开和标题一样的高度-->
        <div :class="[titleshow==true?'empty':'']"></div>

        <!--<span class='toptitle'>排行榜详情</span>-->
        <!--<span class='list-title'>排行榜详情</span>-->
        <listitem :songsinfo='songsinfo' :isrankinfo='true'></listitem>
        <el-backtop target=".page-component__scroll .el-scrollbar__wrap"></el-backtop>

    </div>
</template>

<script>
  import listitem from '../player/listitem.vue'

  export default {
    name: 'rankinfo',
    data() {
      return {
        ranklistimg: {},
        ranklisttitle: '',
        rankinfo: [],
        songsinfo: [],
        titleshow: false
      }
    },
    created() {
      this.getRankInfo()
    },
    methods: {
      // 滚动事件
      scroll(e) {
        // 排行榜图片高度
        if (e.target.scrollTop >= 224) {
          this.titleshow = true;
        } else {
          this.titleshow = false;
        }
      },

      getRankInfo() {
        //  获取排行榜信息，根据rankid：this.$route.params.id
        this.$axios.get(this.HOST + '/rank/info/?rankid=' + this.$route.params.id + '&page=1&json=true').then(res => {
          // 排行榜顶部图片
          this.ranklistimg = res.data.info.imgurl.replace('/{size}', '');
          this.ranklisttitle = res.data.info.rankname;
          this.rankinfo = res.data.songs.list;
        }).then(res => {
          this.rankinfo.forEach((i, index) => {
            this.$axios.get(this.HOST + '/app/i/getSongInfo.php?cmd=playInfo&hash=' + i.hash).then(res => {
              // songsinfo包含filename:歌手-歌曲名，url：歌曲地址，id:绑定key的索引index，imgUrl:歌曲歌手图片(需要去掉网址中包含的'/{size}'),歌手名，歌曲名，播放时长timeLength
              // this.songsinfo.push({'error':res.data.error,'filename':this.rankinfo[index].filename,'url':res.data.url,'id':res.data.album_audio_id,'imgUrl':res.data.imgUrl.replace('/{size}',''),'singername':res.data.choricSinger,'songname':res.data.songName,'timeLength':res.data.timeLength})
              this.songsinfo.push({
                'hash': i.hash,
                'error': res.data.error,
                'filename': res.data.fileName,
                'url': res.data.url,
                'id': res.data.album_audio_id,
                'imgUrl': res.data.imgUrl.replace('/{size}', ''),
                'singername': res.data.choricSinger,
                'songname': res.data.songName,
                'timeLength': res.data.timeLength
              })
            })
          })
        });
      }
    },
    components: {
      listitem
    }
  }
</script>

<style scoped>
    .rankinfobody {
        height: 100vh;
        z-index: 1999;
        overflow: auto;
        padding-top: 0;
        position: absolute;
    }

    .fixedtitle {
        position: fixed;
        top: 0;
        width: 100%;
        background-color: #000;
        color: orange;
        font-size: 18px;
        height: 40px;
        line-height: 40px;

    }

    .list-title {
        width: 100%;
        background-color: #000;
        color: orange;
        font-size: 18px;
        height: 40px;
        line-height: 40px;
    }

    .rankimg {
        width: 100%;
        height: 14rem;
        overflow: hidden;
        object-fit: cover;
    }

    .toptitle {
        background-color: black;
        width: 100%;
    }
    .empty {
        height: 40px;

    }
</style>
